<template>
  <el-dialog v-model="addOrEditVisible" title="分销等级设置" :before-close="closeEditDialog"
             width="50%">
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="160px" class="demo-ruleForm"
             :size="formSize" status-icon>
      <el-row >
        <el-col :span="24">
          <el-form-item label="分销等级名称" prop="fxName">
            <template v-if="urlName=='RetailFxLevelListDj'">
              <el-input  v-model="ruleForm.fxName"/>
            </template>
            <template v-else>
              <el-input  v-model="ruleForm.fxName" disabled/>
            </template>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="urlName=='RetailFxLevelListDj'">
        <el-col :span="24">
          <el-form-item label="团队商铺最小数量（个）" prop="groupStartNum">
            <el-input v-model="ruleForm.groupStartNum">
<!--              <template #append>%</template>-->
            </el-input>
            <span class="form-tip">区域合伙人晋升的团队中的最小店铺数</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="urlName=='RetailFxLevelListDj'">
        <el-col :span="24">
          <el-form-item label="团队商铺最大数量（个）" prop="groupEndNum">
            <el-input v-model="ruleForm.groupEndNum">
<!--              <template #append>%</template>-->
            </el-input>
            <span class="form-tip">区域合伙人晋升的团队中的最大店铺数</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="urlName=='RetailFxLevelListDj'">
        <el-col :span="24">
          <el-form-item label="最大佣金比例" prop="maxMoneyPer">
            <el-input v-model="ruleForm.maxMoneyPer">
              <template #append>%</template>
            </el-input>
            <span class="form-tip">该级别的区域合伙人所能得到的最大佣金比例</span>
          </el-form-item>
        </el-col>
      </el-row>
      <!--      <el-row>-->
      <!--        <el-col :span="24">-->
      <!--          <el-form-item label="状态 0-停用 1-启用 2-备用" prop="statusFlag">-->
      <!--            <el-input v-model="ruleForm.statusFlag"/>-->
      <!--          </el-form-item>-->
      <!--        </el-col>-->
      <!--      </el-row>-->
      <!--      <el-row>-->
      <!--        <el-col :span="24">-->
      <!--          <el-form-item label="是否删除 0-否 1-是" prop="delFlag">-->
      <!--            <el-input v-model="ruleForm.delFlag"/>-->
      <!--          </el-form-item>-->
      <!--        </el-col>-->
      <!--      </el-row>-->
      <!--      <el-row>-->
      <!--        <el-col :span="24">-->
      <!--          <el-form-item label="创建人" prop="createUser">-->
      <!--            <el-input v-model="ruleForm.createUser"/>-->
      <!--          </el-form-item>-->
      <!--        </el-col>-->
      <!--      </el-row>-->
      <!--      <el-row>-->
      <!--        <el-col :span="24">-->
      <!--          <el-form-item label="创建时间" prop="createTime">-->
      <!--            <el-input v-model="ruleForm.createTime"/>-->
      <!--          </el-form-item>-->
      <!--        </el-col>-->
      <!--      </el-row>-->
      <!--      <el-row>-->
      <!--        <el-col :span="24">-->
      <!--          <el-form-item label="修改时间" prop="updateTime">-->
      <!--            <el-input v-model="ruleForm.updateTime"/>-->
      <!--          </el-form-item>-->
      <!--        </el-col>-->
      <!--      </el-row>-->
      <el-row v-if="urlName=='RetailFxLevelListDj'">
        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <el-input type="textarea" v-model="ruleForm.remark"/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row v-if="urlName=='RetailFxLevelListFc'">
        <el-col :span="24">
          <el-form-item label="自身分成比例" prop="fallIntoPer">
            <el-input v-model="ruleForm.fallIntoPer">
              <template #append>%</template>
            </el-input>
            <span class="form-tip">该级别的区域合伙人所能得到的自身分成比例</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="urlName=='RetailFxLevelListFc'">
        <el-col :span="24">
          <el-form-item label="团队分成比例" prop="fallIntoGroupPer">
            <el-input v-model="ruleForm.fallIntoGroupPer">
              <template #append>%</template>
            </el-input>
            <span class="form-tip">该级别的区域合伙人所能得到的团队分成比例</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="urlName=='RetailFxLevelListFc'">
        <el-col :span="24">
          <el-form-item label="分成描述" prop="fallIntoDesc">
            <el-input type="textarea" v-model="ruleForm.fallIntoDesc"/>
            <span class="form-tip">该级别的区域合伙人所能得到的分成比例描述</span>
          </el-form-item>
        </el-col>
      </el-row>
<!--      <el-row v-if="urlName=='RetailFxLevelListFc'">-->
<!--        <el-col :span="24">-->
<!--          <el-form-item label="分成备注" prop="fallIntoRemark">-->
<!--            <el-input v-model="ruleForm.fallIntoRemark"/>-->
<!--            <span class="form-tip">该级别的团队长所能得到的分成备注</span>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--      </el-row>-->
    </el-form>
    <template #footer>
         <span class="dialog-footer">
           <el-button @click="closeEditDialog">关闭</el-button>
           <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
         </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import {reactive, ref} from 'vue'
import type {FormInstance, FormRules} from 'element-plus'
import {ElMessage} from "element-plus";
import router from "@/router";
import {RetailFxLevel} from '@/apis/model/setting/RetailFxLevelModel';
import {insertRetailFxLevel, updateRetailFxLevel} from '@/apis/http/setting/RetailFxLevelHttp';

interface Prop {
  addOrEditVisible: boolean,
  urlName: string,
  ruleForm: RetailFxLevel,
  addDataType: string
}

// 刷新list页面
const refushList = ref(false);

// 传递过来的参数
const props = defineProps<Prop>();

const emit = defineEmits(["closeEditDialog"]);

// 关闭按钮
const closeEditDialog = () => {
  emit("closeEditDialog", {
    addOrEditVisible: !props.addOrEditVisible,
    refushList: refushList.value
  })
}
const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()

const rules = reactive<FormRules>({
  id: [
    {required: true, message: '请输入', trigger: 'blur'}
  ],
  groupStartNum: [
    {required: true, message: '请输入团队商铺数量-最小', trigger: 'blur'}
  ],
  groupEndNum: [
    {required: true, message: '请输入团队商铺数量-最大', trigger: 'blur'}
  ],
  maxMoneyPer: [
    {required: true, message: '请输入最大佣金比例', trigger: 'blur'}
  ],
  statusFlag: [
    {required: true, message: '请输入状态 0-停用 1-启用 2-备用', trigger: 'blur'}
  ],
  delFlag: [
    {required: true, message: '请输入是否删除 0-否 1-是', trigger: 'blur'}
  ],
  createUser: [
    {required: true, message: '请输入创建人', trigger: 'blur'}
  ],
  createTime: [
    {required: true, message: '请输入创建时间', trigger: 'blur'}
  ],
  updateTime: [
    {required: true, message: '请输入修改时间', trigger: 'blur'}
  ],
  remark: [
    {required: true, message: '请输入备注', trigger: 'blur'}
  ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      // 新增
      if (props.addDataType === 'add') {
        insertRetailFxLevel(props.ruleForm).then(res => {
          const code = res.code;
          const message: string = res.message;
          const data = res.data;
          if (code == 200) {
            ElMessage({
              message: '创建成功！',
              type: 'success',
            })
            refushList.value = true
            closeEditDialog()
          } else {
            ElMessage.error('创建失败！')
          }
        })
      } else if (props.addDataType === 'edit') {
        updateRetailFxLevel(props.ruleForm).then(res => {
          const code = res.code;
          const message: string = res.message;
          const data = res.data;
          if (code == 200) {
            ElMessage({
              message: '更新成功！',
              type: 'success',
            })
            refushList.value = true
            closeEditDialog()
          } else {
            ElMessage.error('更新失败！')
          }
        })
      }

    } else {
      ElMessage.error('请完善信息！')
    }
  })
}
</script>

<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}


.form-tip {
  color: gray;
}
</style>
